import React, { useState, useEffect } from 'react';
import axios from 'axios'
import { useRequest } from 'ahooks'
import { Table, Button, Form, Pagination } from 'antd'
import 'antd/dist/antd.css'

const { Column } = Table

const TableComponent = () => {
  const [listQuery, setListQuery] = useState({
    pageNumber: 1,
    pageSize: 10,
    title: "",
    star: "",
    status: ""
  })
  const fetchTableList = (query) => {
    return new Promise((resolve, reject) => {
      axios.post('/table/list', query)
        .then(data => {
          resolve(data)
        })
        .catch(err => {
          reject(err)
        })
    })
  }
  const { data, error, loading = false, run } = useRequest(() => fetchTableList(listQuery))
  // console.log(data, '+++++++++++++')
  const changePage = (pageNumber) => {
    // console.log(pageNumber,'************');
    setListQuery({
      ...listQuery,
      pageNumber
    })
  }

  useEffect(() => {
    run()
  }, [listQuery])

  return (
    <>
      {data && data.data.data.total > 0 && (
        <>
          <Table
          border
          rowKey={(record) => record.id}
          dataSource={data.data.data.items}
          loading={loading}
        >
          <Column
            title="名称"
            dataIndex="title"
            key="id"
            width={200}
            align="center"></Column>
          <Column
            title="序号"
            dataIndex="id"
            key="id"
            width={200}
            align="center"></Column>
          <Column
            title="序号"
            dataIndex="id"
            key="id"
            width={200}
            align="center"></Column>
          </Table>
          <Pagination
            total={data.data.data.total}
            pageSizeOptions={['10', '20', '40']}
            onChange={changePage}
          ></Pagination>
        </>
      )}
    </>
  )
}

export default TableComponent;